<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <% include("/include/header3.html",{"title":"代码生成"}){} %>
</head>
<body>

<div id="app">
  <div class="mainBox ">
    <div class="main-container layui-card">
      <div class="layui-card-body">
        <t-table :columns="columns" :data="table.data" :loading="table.loading" bordered hover resizable>
          <template #loading>
            <div class="t-table--loading-message">加载数据中，请稍后...</div>
          </template>
        </t-table>

      </div>
    </div>
  </div>
  <div class="bottom">
    <t-space class="button-container">
      <t-button :loading="loading" theme="warning" @click="execGen"><i class="layui-icon layui-icon-sunny mr-5 text-size-14"></i>生成到项目</t-button>
      <t-button :loading="loading" theme="primary" @click="createConfig"><i class="layui-icon layui-icon-setting mr-5 text-size-14"></i>生成配置</t-button>
      <t-button :loading="loading" theme="primary" @click="clickSave"><i class="layui-icon layui-icon-ok mr-5 text-size-14"></i>保存</t-button>
      <t-button theme="warning" @click="closeBtn.close"><i class="layui-icon mr-5 text-size-14" :class="closeBtn.i"></i>{{closeBtn.t}}</t-button>
    </t-space>
  </div>
</div>

<script>
  const BASIC_ID = "${basicId}";
  const BASIC_URL = "gen/basic/";
  const PATH_URL = "gen/config/";
</script>


<script>

  setupVue("#app", {
    setup() {

      const table = useTable();
      const ign = ['create_user', 'create_time', 'update_user', 'update_time', 'client_ip']
      const fetchData = () => {
        fetchList(axiosGet, PATH_URL + "list", { basicId: BASIC_ID, limit: 100 }, table, function () {
          table.data = table.data.filter((item) => {
            return !ign.includes(item['fieldName']);
          })
        });
      };
      if (BASIC_ID) fetchData();
      else $baseAlert("未找到表数据", () => closeLayer());

      // 实体类型
      const fieldJavaTypeOptions = [
        { label: 'Integer', value: 'Integer' },
        { label: 'Long', value: 'Long' },
        { label: 'String', value: 'String' },
        { label: 'Boolean', value: 'Boolean' },
        { label: 'Float', value: 'Float' },
        { label: 'Double', value: 'Double' },
        { label: 'LocalDateTime', value: 'LocalDateTime' },
        { label: 'LocalDate', value: 'LocalDate' },
        { label: 'LocalTime', value: 'LocalTime' },
        { label: 'BigDecimal', value: 'BigDecimal' },
      ]
      // 类型
      const effectTypeOptions = [
        { label: '输入框', value: 'input' },
        { label: '文本框', value: 'textarea' },
        { label: '下拉框', value: 'select' },
        { label: '单选框', value: 'radio' },
        { label: '复选框', value: 'checkbox' },
        { label: '日期选择器', value: 'datepicker' },
        { label: '时间选择器', value: 'timepicker' },
        { label: '数字输入框', value: 'inputNumber' },
        { label: '滑动数字条', value: 'slider' },
      ];
      // 查询方式
      const queryTypeOptions = [
        { label: '模糊包含', value: 'like' },
        { label: '模糊不包含', value: 'notLike' },
        { label: '等于', value: 'eq' },
        { label: '不等于', value: 'ne' },
        { label: '大于', value: 'gt' },
        { label: '大于等于', value: 'ge' },
        { label: '小于', value: 'lt' },
        { label: '小于等于', value: 'le' },
      ]
      // 设置该下拉框是否能选
      const toFieldSelectEstimate = (row) => {
        return row.fieldJavaType === 'LocalDateTime' && row.effectType === 'datepicker'
          || row.fieldJavaType === 'LocalDate' && row.effectType === 'datepicker'
          || row.fieldJavaType === 'LocalTime' && row.effectType === 'timepicker'
      };
      // 实体类型选择触发
      const fieldJavaTypeChange = (row, value) => {
        row.fieldJavaType = value;
        if (value === 'LocalDateTime') {
          row.effectType = 'datepicker'
        } else if (value === 'LocalDate') {
          row.effectType = 'datepicker'
        } else if (value === 'LocalTime') {
          row.effectType = 'timepicker'
        } else if (row.effectType === 'datepicker') {
          row.effectType = 'input'
        }
      }

      // 保存
      const clickSave = () => {
        let errStatus = 100;
        const tableData = $base.deepClone(Vue.toRaw(table.data));
        tableData.forEach(item => {
          if (item.queryWhether && !item.queryType) {
            // 排除掉时间选择
            if (item.fieldJavaType !== 'LocalDateTime' && item.fieldJavaType !== 'LocalDate' && item.fieldJavaType !== 'LocalTime' && item.effectType !== 'checkbox') {
              errStatus++
            }
          }
          if (['select', 'radio', 'checkbox'].includes(item.effectType) && !item.dictTypeCode) {
            // errStatus++
          }
        })
        if (errStatus > 100) {
          return $baseAlert("校验失败，请选择对应的下拉框选项");
        }
        req(axiosPut, PATH_URL + "/editBatch", tableData, (res) => $baseAlert(res.msg), table.loading)
      }

      // 生成配置
      const createConfig = () => req(axiosPut, BASIC_URL + "createConfig", { id: BASIC_ID }, (res) => {
        $baseAlert(res.msg);
        fetchData();
      }, table.loading)
      // 生成
      const execGen = () => req(axiosGet, BASIC_URL + "execGenPro/" + BASIC_ID, {}, (res) => $baseAlert(res.msg))


      // 表格列
      const columns = [
        { colKey: 'serial-number', align: 'center', title: '', width: 20 },
        { colKey: 'fieldName', title: '字段', width: '80px' }, { colKey: 'fieldRemark', title: '注释', width: '130px', ellipsis: true },
        {
          colKey: 'fieldJavaType', title: '实体类型', align: 'center', width: '100px',
          cell: (h, { row }) => {
            return h(TDesign.Select, {
              modelValue: row.fieldJavaType, options: fieldJavaTypeOptions, onChange: (value) => fieldJavaTypeChange(row, value),
            }, null)
          },
        },
        {
          colKey: 'effectType', title: '作用类型', align: 'center', width: '100px',
          cell: (h, { row }) => {
            return h(TDesign.Select, {
              modelValue: row.effectType, disabled: toFieldSelectEstimate(row), options: effectTypeOptions, onChange: (value) => row.effectType = value,
            }, null)
          },
        },
        {
          colKey: 'whetherTable', title: '列表显示', align: 'center', width: '80px',
          cell: (h, { row }) => {
            return h(TDesign.Checkbox, { modelValue: row.whetherTable, onChange: (value) => row.whetherTable = value ? 1 : 0 }, null)
          },
        },
        {
          colKey: 'whetherRetract', title: '列省略', align: 'center', width: '80px',
          cell: (h, { row }) => {
            return h(TDesign.Checkbox, { modelValue: row.whetherRetract, onChange: (value) => row.whetherRetract = value ? 1 : 0 }, null)
          },
        },
        {
          colKey: 'whetherAddUpdate', title: '是否增改', align: 'center', width: '80px',
          cell: (h, { row }) => {
            return h(TDesign.Checkbox, { modelValue: row.whetherAddUpdate, onChange: (value) => row.whetherAddUpdate = value ? 1 : 0 }, null)
          },
        },
        {
          colKey: 'whetherRequired', title: '是否必填', align: 'center', width: '80px',
          cell: (h, { row }) => {
            return h(TDesign.Checkbox, { modelValue: row.whetherRequired, onChange: (value) => row.whetherRequired = value ? 1 : 0 }, null)
          },
        },
        {
          colKey: 'queryWhether', title: '查询', align: 'center', width: '80px',
          cell: (h, { row }) => {
            return h(TDesign.Checkbox, { modelValue: row.queryWhether, onChange: (value) => row.queryWhether = value ? 1 : 0 }, null)
          },
        },
        {
          colKey: 'queryType', title: '查询方式', align: 'center', width: '120px',
          cell: (h, { row }) => {
            if (row.queryWhether && row.effectType !== 'datepicker') {
              return h(TDesign.Select, { modelValue: row.queryType, options: queryTypeOptions, onChange: (value) => row.queryType = value }, null)
            } else if (row.queryWhether && row.effectType === 'datepicker') {
              row.queryType = '时间段';
              return h("span", {}, '时间段');
            } else {
              row.queryType = '';
              return h("span", {}, '无');
            }
          },
        },
      ]

      return {
        closeBtn: useCloseBtn(),
        table, columns,
        fieldJavaTypeOptions, effectTypeOptions, queryTypeOptions,
        toFieldSelectEstimate,
        fieldJavaTypeChange,
        clickSave, createConfig, execGen,
      }

    },
  });
</script>


</body>
</html>
